@import "../../style/variables.less";
@import "../../style/mixins/index.less";

@w-upload : ~"w-upload";

.@{w-upload}-dragger {
  padding: 0;
  border: 1px dashed @upload-border-color;
  border-radius: @border-radius-base;
  background: @upload-bg-color;

  &-wrap {
    text-align: center;
    > button {
      margin-top: 5px;
      background: transparent;
      border-color: @upload-bg-color;
      &:hover,&:active,&:visited {
        background-color: transparent;
        box-shadow: none;
        border-color: @upload-button-border-color;
      }
      &:hover {
        i,span {
          color: @upload-button-border-color;
        }
      }
      span {
        font-size: @font-size-small;
        color: @upload-font-color;
        line-height: 24px;
        vertical-align: bottom;
        i[class^="w-icon"] {
          font-size: 24px;
          margin-right: 5px;
        }
      }
    }
    > span {
      font-size: @font-size-small;
    }
    > input[type="file"] {
      display: none;
    }
    > p {
      font-size: @font-size-small;
      color: @upload-font-color;
      font-weight: lighter;
    }
    ul {
      text-align: left;
      margin: 8px 0;
      li {
        display: inline-block;
        width: @upload-li-width;
        height: @upload-li-height;
        border-radius: @border-radius-base;
        border: 2px solid #fff;
        position: relative;
        overflow: hidden;
        margin-right: 8px;
        &:hover {
          cursor: all-scroll;
          p {
            opacity: 1;
          }
        }
        > div {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
        > p {
          position: absolute;
          transition: all .3s;
          opacity: 0;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, .3);
          text-align: center;
          span {
            display: block;
            color: white;
            font-size: @font-size-small;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          i {
            position: relative;
            color: white;
            font-size: 16px;
            padding: 10px;
            display: inline;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
